import React from 'react';
import {Image, Platform, View, Text} from 'react-native';
import Swiper from 'react-native-swiper';
import BaseUrl from '../../config/BaseUrl';
import {advert} from '../../service/home';
import styles from './style';

const Banner = () => {
  const [advertList, setAdvertList] = React.useState([]);
  React.useEffect(() => {
    // 轮播广告
    advert().then((res) => {
      // console.log('-------advert',res);
      setAdvertList(res.data);
    });
  }, []);
  return (
    <Swiper
      key={advertList.length}
      removeClippedSubviews={Platform.android ? true : false}
      paginationStyle={{
        bottom: 10,
        justifyContent: 'flex-end',
        paddingRight: 5,
      }}
      loop={true}
      dot={
        <View
          style={{
            backgroundColor: 'rgba(0,0,0,0)',
            width: 8,
            height: 8,
            borderColor: '#fff',
            borderWidth: 1.5,
            borderRadius: 8,
            marginRight: 6,
          }}
        />
      }
      activeDot={
        <View
          style={{
            backgroundColor: '#fff',
            width: 8,
            height: 8,
            borderColor: '#fff',
            borderWidth: 1.5,
            borderRadius: 8,
            marginRight: 6,
          }}
        />
      }
      autoplay={true}
      showsPagination={true}>
      {(advertList || []).map((item, index) => (
        <Image
          key={index}
          style={styles.img}
          source={{uri: BaseUrl.imgurl + item?.coveImage}}
        />
      ))}
    </Swiper>
  );
};

export default Banner;
